import React, { useEffect, useRef } from 'react';
import hljs from 'highlight.js'
import copyText from 'copy-to-clipboard';
import {message} from 'antd'
import './index.less';

const HighLight: React.FC=({children})=>{
    const container = useRef<HTMLDivElement>(null);
    useEffect(()=>{
        container.current!.querySelectorAll('pre code').forEach((el) => {
          hljs.highlightElement(el as HTMLElement);
          const copy = document.createElement('span');
          copy.innerText = 'copy';
          copy.className = 'copy';
          copy.onclick = ()=>{
            copyText((el as HTMLElement).innerText);
            message.success('复制成功');
          }
          el.parentNode!.appendChild(copy);
        });
      }, [children]);
    
    return <div ref={container} className='markdown'>
        {children}
    </div>
}
export default HighLight